<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { mapMutations, mapActions } from "vuex";

import { on, off } from "view-ui-plus/src/utils/dom";
import { setMatchMedia } from "view-ui-plus/src/utils/assist";

setMatchMedia();

export default defineComponent({
  name: "app",
  methods: {
    ...mapMutations("admin/layout", [
      "setDevice",
      "setBodyHeight",
      "setBodyWidth",
    ]),
    ...mapActions("admin/page", ["closeOther", "closeRight"]),
    handleWindowResize() {
      this.handleMatchMedia();
      this.handleSetBodyHeight();
      this.handleSetBodyWidth();
    },
    handleMatchMedia() {
      const matchMedia = window.matchMedia;

      if (matchMedia("(max-width: 600px)").matches) {
        this.setDevice("Mobile");
      } else if (matchMedia("(max-width: 992px)").matches) {
        this.setDevice("Tablet");
      } else {
        this.setDevice("Desktop");
      }
    },
    handleSetBodyHeight() {
      this.setBodyHeight(document.body.offsetHeight);
    },
    handleSetBodyWidth() {
      this.setBodyWidth(document.body.offsetWidth);
    },
  },
  mounted() {
    on(window, "resize", this.handleWindowResize);
    this.handleMatchMedia();
    this.handleSetBodyHeight();
    this.handleSetBodyWidth();
    const params = { pageSelect: this.$route.path };
    this.closeOther(params);
  },
  beforeUnmount() {
    off(window, "resize", this.handleWindowResize);
  },
});
</script>
